<template>
  <div class="fullMain">
    <x-header
      class="custumHeader"
      :left-options="{backText: '',showBack: false}">
      <a slot="left" @click="back">
        <x-icon type="ios-arrow-left"></x-icon>
        <!--<i slot="overwrite-left" class="lIcon">X</i>-->
      </a>
      <span>分配任务</span>
      <!-- <a slot="right">
         <x-icon slot="overwrite-right" type="ios-more" size="35" style="position:relative;top:-8px;left:-3px;"></x-icon>
       </a>-->
    </x-header>
    <div class="mainbBg">
      <!--<div class="menuHeader">
        <i class="fa fa-chevron-left mT returnIcon"></i>
        &lt;!&ndash;<span class="ids">
          姓名：老板
          <i class="fa fa-weixin icons"></i>
        </span>&ndash;&gt;
      </div>-->
      <div class="tableDiv_100">
        <div class="rwDiv">
          <span>实验室管理系统</span>
          <a href="javascript:void(0)" @click="showTostFun('项目成员1')">
            <span>项目成员1</span>
          </a>
          <a href="javascript:void(0)" @click="showTostFun('项目成员2')">
            <span>项目成员2</span>
          </a>
          <a href="javascript:void(0)" @click="showTostFun('项目成员3')">
            <span>项目成员3</span>
          </a>
          <a href="javascript:void(0)" @click="showTostFun('项目成员4')">
            <span>项目成员4</span>
          </a>
        </div>
      </div>
    </div>
    <!--弹窗-->
    <div v-transfer-dom>
      <popup v-model="showTost" height="340px" is-transparent>
        <div style="width: 95%;background-color:#fff;height:250px;margin:0 auto;border-radius:5px;padding-top:10px;">
          <group class="allprojectP">
            <x-input :title="tostName" ></x-input>
          </group>
          <group class="tostShow">
            <label style="margin-left: 15px;">项目成员</label>
            <select>
              <option>王五</option>
              <option>王五</option>
              <option>王五</option>
              <option>王五</option>
              <option>王五</option>
            </select>
          </group>
          <group class="allprojectP">
            <datetime
              v-model="startTime"
              @on-change="change"
              :title="startLabel"
              @on-cancel="log('cancel')"
              @on-confirm="onConfirm"
              @on-hide="log('hide', $event)"></datetime>
          </group>
          <group class="allprojectP">
            <datetime
              v-model="endTime"
              @on-change="change"
              :title="endLabel"
              @on-cancel="log('cancel')"
              @on-confirm="onConfirm"
              @on-hide="log('hide', $event)"></datetime>
          </group>
          <group>
            <x-textarea :rows="5" placeholder="请输入任务描述" v-model="pJdjh" :show-counter="false"></x-textarea>
          </group>
          <div>
            <x-button type="primary" class="tostOkBtn">确定</x-button>
          </div>
        </div>
      </popup>
    </div>
  </div>
</template>

<script>
  import { XHeader } from 'vux'
  import { XTable } from 'vux'
  import { XInput,XTextarea,Datetime,Group,Icon } from 'vux'
  import { TransferDom, Popup, Cell, XButton} from 'vux'
  import { Scroller } from 'vux'
  export default {
    directives: {
      TransferDom
    },
    data(){
      return {
        startLabel : "开始时间",
        startTime : "2018-12-18",
        endLabel : "截止时间",
        endTime : "2018-12-18",
        pStart : "",
        pEnd : "",
        pGzbc : "",
        pGzms : "",
        pWcqk : "",
        pName : "",
        pLb: "",
        names : "",
        pJdjh : "",
        showTost: false,
        tostName : "",
      }
    },
    components:{
      XHeader,
      XTable,
      Scroller,
      XInput,
      Group,
      Datetime,
      XTextarea,
      TransferDom,
      Popup,
      Cell,
      XButton
    },
    methods:{
      back(){
        this.$router.push({name: 'S-1-1-myproject'});
      },
      log (str1, str2 = '') {
        console.log(str1, str2)
      },
      onConfirm (val) {
        console.log('on-confirm arg', val)
        console.log('current value', this.startTime)
      },
      change (value) {
        console.log('change', value)
      },
      showTostFun(name){
        this.showTost = true;
        this.tostName = name;
      }
    }
  }
</script>

<style>
</style>
